<template>
  <van-form >
    <van-cell-group inset>
      <van-field
          v-model="form.index"
          name="number"
          label="唯一标识"
      />
      <van-field
          is-link
          readonly
          name="type"
          label="果树类型"
          placeholder="点击选择类型"
          @click.stop="showTreeTypePicker = true"
      >
        <template #input v-if="form.tree[0]">
          <van-tag
              plain
              type="primary"
              v-for="(item, index) in form.tree"
              :key="index"
              :color="item.color"
              style="margin-right: 10px"
              @close="closeTag(item,form.tree)"
              closeable
          >{{ item.text }}
          </van-tag
          >
        </template>
      </van-field>

      <van-popup v-model:show="showTreeTypePicker" position="bottom">
        <van-picker
            :columns="treeTypeList"
            @confirm="onTreeConfirm"
            @cancel="showTreeTypePicker = false"
        />
      </van-popup>
      <van-field
          is-link
          readonly
          name="risk"
          label="问题类型"
          placeholder="点击选择类型"
          @click.stop="showRiskTypePicker = true"
      >
        <template #input v-if="form.risk[0]">
          <van-tag
              plain
              type="primary"
              v-for="(item, index) in form.risk"
              :key="index"
              :color="item.color"
              style="margin-right: 10px"
              @close="closeTag(item,form.risk)"
              closeable
          >{{ item.text }}
          </van-tag
          >
        </template>
      </van-field>

      <van-popup v-model:show="showRiskTypePicker" position="bottom">
        <van-picker
            :columns="riskTypeList"
            @confirm="onRiskConfirm"
            @cancel="showRiskTypePicker = false"
        />
      </van-popup>
      <van-field name="healthStatus" label="生长情况">
        <template #input>
          <van-rate v-model="form.rate" allow-half color="#f56c6c"/>
        </template>
      </van-field>
    </van-cell-group>
    <div style="margin: 16px;display: flex;justify-content: center">
      <slot></slot>
    </div>
  </van-form>
</template>
<script setup lang="ts" name="Detail">
import {ref, toRaw} from "vue";
import {showNotify} from "vant";
import {useResetReactive} from "../../hooks";
import {getTypeList} from '../../api/manage.ts'
import tree from "../../api/tree.ts";
const [form, resetForm] = useResetReactive({
  index: "",
  tree: [] as any,
  risk: [] as any,
  rate: 0,
});
resetForm();

async function setProps({values}){
  console.log(values)
  await getRiskTypeList()
  await getTreeTypeList()
  form.index = values.index;
  form.tree = stringToList(values.tree,treeTypeList.value)
  form.risk = stringToList(values.risk,riskTypeList.value)
  form.rate = values.rate
}

const showTreeTypePicker = ref(false);
const showRiskTypePicker = ref(false)
const treeTypeList = ref([]);
const getTreeTypeList = async () => {
  const r = await getTypeList(3)
  treeTypeList.value = JSON.parse(JSON.stringify(r).replace(/id/g,'value').replace(/name/g,'text'))
}
getTreeTypeList()

const riskTypeList = ref([]);
const getRiskTypeList = async () => {
  const r = await getTypeList(2)
  riskTypeList.value = JSON.parse(JSON.stringify(r).replace(/id/g,'value').replace(/name/g,'text'))
}
getRiskTypeList()

const onTreeConfirm = ({selectedOptions}: any) => {
  setToArr(form.tree,selectedOptions)
  showTreeTypePicker.value = false;
};

function onRiskConfirm({selectedOptions}: any){
  setToArr(form.risk,selectedOptions)
  showRiskTypePicker.value = false;
}

function closeTree(item){
  const index = form.tree.findIndex((x:any)=>x.value === item.value)
  if(index > -1){
    form.tree.splice(index,1)
  }
}
function closeRisk(item){
  const index = form.risk.findIndex((x:any)=>x.value === item.value)
  if(index > -1){
    form.risk.splice(index,1)
  }
}

function closeTag(item,options){
  const index =options.findIndex((x:any)=>x.value === item.value)
  if(index > -1){
    options.splice(index,1)
  }
}
function listToString(data){
  let arr = []
   data.map(x=>arr.push(x.value))
  return arr.toString();
}
function stringToList(str,options){
  if(str === '') return [];
  const arr = str.split(',')
  return  arr.map(x=> options.find(z=>z.value === x))
}
function setToArr(arr,data){
 const r = arr.find(x=>(x.value === data[0].value))
  if(!r){
    arr.push(data[0])
  }
}
function getValue(){
  return {
    index: form.index,
    tree: listToString(form.tree),
    risk: listToString(form.risk),
    rate: form.rate,
  }
}
defineExpose({setProps,getValue})
</script>
